<template>
    <Header></Header>

    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto px-4 md:px-6 py-4">
        <!-- grid 表格布局，分为 4 列 -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 左边栏，占用 3 列 -->
            <div class="col-span-4 md:col-span-3 mb-3">
                <!-- 文章列表，垂直列表布局 -->
                <div class="space-y-3">
                    <div v-for="(article, index) in articles" :key="index" class="animate__animated animate__fadeInUp">
                        <div class="relative bg-white hover:shadow-lg hover:-translate-y-1 transition-all duration-300 border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700 overflow-hidden"
                             @touchstart="handleTouchStart($event, article.id)"
                             @touchend="handleTouchEnd"
                             @touchcancel="handleTouchEnd"
                             @contextmenu.prevent="handleRightClick($event, article.id)">
                            <div class="flex flex-col sm:flex-row">
                                <!-- 左侧文章封面 -->
                                <div class="flex-shrink-0 overflow-hidden rounded-t-lg sm:rounded-t-none sm:rounded-l-lg bg-gray-100 dark:bg-gray-700">
                                    <a @click="goArticleDetailPage(article.id)" class="cursor-pointer block w-full h-48 sm:w-40 sm:h-32">
                                        <img class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"
                                            :src="article.cover || '/default-cover.png'" 
                                            :alt="article.title"
                                            @error="$event.target.src='/default-cover.png'" />
                                    </a>
                                </div>
                                
                                <!-- 右侧文章信息 - 单行布局 -->
                                <div class="flex-1 p-4 flex items-center justify-between">
                                    <!-- 主要内容区域 -->
                                    <div class="flex-1 flex items-center gap-4">
                                        <!-- 文章标题 -->
                                        <div class="flex-1 min-w-0">
                                            <a @click="goArticleDetailPage(article.id)" class="cursor-pointer">
                                                <h2 class="text-base font-semibold text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 line-clamp-2">
                                                    {{ article.title }}
                                                </h2>
                                            </a>
                                        </div>
                                        
                                        <!-- 标签 -->
                                        <div class="flex-shrink-0 flex items-center gap-1">
                                            <span v-for="(tag, tagIndex) in (article.tags || []).slice(0, 2)" :key="tagIndex" 
                                                @click="goTagArticleListPage(tag.id, tag.name)"
                                                class="cursor-pointer inline-block px-1.5 py-0.5 text-xs bg-blue-100 text-blue-800 rounded hover:bg-blue-200 transition-colors duration-200 dark:bg-blue-900/30 dark:text-blue-300 dark:hover:bg-blue-900/50">
                                                {{ tag.name }}
                                            </span>
                                        </div>
                                        
                                        <!-- 发布时间和分类 -->
                                        <div class="flex-shrink-0 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                                            <!-- 发布时间 -->
                                            <div class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                                                </svg>
                                                <span>{{ article.createDate }}</span>
                                            </div>
                                            
                                            <!-- 分类 -->
                                            <div v-if="article.category" class="flex items-center">
                                                <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                    <path d="M7 3a1 1 0 000 2h6a1 1 0 100-2H7zM4 7a1 1 0 011-1h10a1 1 0 110 2H5a1 1 0 01-1-1zM2 11a2 2 0 012-2h12a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2v-4z"/>
                                                </svg>
                                                <a @click="goCategoryArticleListPage(article.category.id, article.category.name)" 
                                                   class="cursor-pointer hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
                                                    {{ article.category.name }}
                                                </a>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <!-- 统计信息 -->
                                    <div class="flex-shrink-0 flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 ml-4">
                                        <!-- 阅读量 -->
                                        <div class="flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                                                <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                                            </svg>
                                            <span>{{ article.readNum || 0 }}</span>
                                        </div>
                                        <!-- 点赞量 -->
                                        <div class="flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"/>
                                            </svg>
                                            <span>{{ article.likeCount || 0 }}</span>
                                        </div>
                                        <!-- 收藏量 -->
                                        <div class="flex items-center">
                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                                <path d="M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z"/>
                                            </svg>
                                            <span>{{ article.favoriteCount || 0 }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 置顶标识 -->
                            <div v-if="article.isTop" class="absolute top-1 right-1 inline-flex items-center px-1.5 py-0.5 text-xs font-medium text-white bg-red-500 rounded">
                                置顶
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 分页 -->
                <nav aria-label="Page navigation example" class="mt-10 flex justify-center">
                    <ul class="flex items-center -space-x-px h-10 text-base">
                        <!-- 上一页 -->
                        <li>
                            <a @click="getArticles(current - 1)"
                                class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current > 1 ? '' : 'cursor-not-allowed']"
                                >

                                <span class="sr-only">上一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="M5 1 1 5l4 4" />
                                </svg>
                            </a>
                        </li>
                        <!-- 页码 -->
                        <li v-for="(pageNo, index) in pages" :key="index">
                            <a @click="getArticles(pageNo)"
                                class="flex items-center justify-center px-4 h-10 leading-tight border  dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[pageNo == current ? 'text-sky-600  bg-sky-50 border-sky-500 hover:bg-sky-100 hover:text-sky-700' : 'text-gray-500 border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-700']"
                                >
                                {{ index + 1 }}
                            </a>
                        </li>
                        <!-- 下一页 -->
                        <li>
                            <a @click="getArticles(current + 1)"
                                class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                :class="[current < pages ? '' : 'cursor-not-allowed']"
                                >
                                <span class="sr-only">下一页</span>
                                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                    viewBox="0 0 6 10">
                                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                        stroke-width="2" d="m1 9 4-4-4-4" />
                                </svg>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>


            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp">
                <div class="sticky top-4 space-y-6 max-h-[calc(100vh-2rem)] overflow-y-auto custom-scrollbar">
                    <!-- 用户信息卡片 -->
                    <div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm dark:bg-gray-800 dark:border-gray-700">
                        <!-- 用户基本信息 -->
                        <div class="text-center mb-6">
                            <div class="relative inline-block">
                                <img class="w-16 h-16 rounded-full mx-auto border-4 border-blue-100 dark:border-blue-900" 
                                     :src="userProfile ? (userProfile.avatar || '/default-avatar.png') : (blogSettingsStore.blogSettings.avatar || '/default-avatar.png')" 
                                     :alt="userProfile ? (userProfile.nickname || userProfile.username) : (blogSettingsStore.blogSettings.author || '博主')">
                                <div v-if="userProfile" class="absolute bottom-0 right-0 w-4 h-4 bg-green-400 border-2 border-white rounded-full dark:border-gray-800"></div>
                            </div>
                            <h3 class="mt-3 text-lg font-semibold text-gray-900 dark:text-white">
                                {{ userProfile ? (userProfile.nickname || userProfile.username) : (blogSettingsStore.blogSettings.author || '博主') }}
                            </h3>
                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
                                {{ userProfile ? (userProfile.bio || '这个人很懒，什么都没留下') : (blogSettingsStore.blogSettings.introduction || '欢迎来到我的博客') }}
                            </p>
                            <span v-if="userProfile" class="inline-block mt-2 px-3 py-1 text-xs bg-blue-100 text-blue-700 rounded-full dark:bg-blue-900 dark:text-blue-300">
                                当前登录用户
                            </span>
                            <span v-else class="inline-block mt-2 px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full dark:bg-gray-700 dark:text-gray-300">
                                访客身份
                            </span>
                        </div>

                        <!-- 个人数据统计（仅普通登录用户显示，管理员不显示） -->
                        <div v-if="userProfile && personalStats && !isAdmin" class="border-t border-gray-100 dark:border-gray-700 pt-4 mb-4">
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                <svg class="w-4 h-4 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"/>
                                </svg>
                                我的数据
                            </h4>
                            <div class="grid grid-cols-2 gap-3 mb-4">
                                <div class="text-center p-3 bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg dark:from-blue-900/20 dark:to-blue-800/20">
                                    <div class="text-lg font-bold text-blue-600 dark:text-blue-400">{{ personalStats.personalArticleCount || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">我的文章</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-green-50 to-green-100 rounded-lg dark:from-green-900/20 dark:to-green-800/20">
                                    <div class="text-lg font-bold text-green-600 dark:text-green-400">{{ personalStats.personalTotalViews || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">我的浏览</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-red-50 to-red-100 rounded-lg dark:from-red-900/20 dark:to-red-800/20">
                                    <div class="text-lg font-bold text-red-600 dark:text-red-400">{{ personalStats.personalTotalLikes || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">我的点赞</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg dark:from-purple-900/20 dark:to-purple-800/20">
                                    <div class="text-lg font-bold text-purple-600 dark:text-purple-400">{{ personalStats.personalTotalFavorites || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">我的收藏</div>
                                </div>
                            </div>
                        </div>

                        <!-- 博客整体统计（仅管理员显示） -->
                        <div v-if="blogStats && isAdmin" class="border-t border-gray-100 dark:border-gray-700 pt-4">
                            <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3 flex items-center">
                                <svg class="w-4 h-4 mr-2 text-indigo-500" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"/>
                                </svg>
                                博客统计
                            </h4>
                            <div class="grid grid-cols-2 gap-3">
                                <div class="text-center p-3 bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg dark:from-amber-900/20 dark:to-amber-800/20">
                                    <div class="text-lg font-bold text-amber-600 dark:text-amber-400">{{ blogStats.articleTotalCount || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">总文章</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg dark:from-indigo-900/20 dark:to-indigo-800/20">
                                    <div class="text-lg font-bold text-indigo-600 dark:text-indigo-400">{{ blogStats.categoryTotalCount || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">分类</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-pink-50 to-pink-100 rounded-lg dark:from-pink-900/20 dark:to-pink-800/20">
                                    <div class="text-lg font-bold text-pink-600 dark:text-pink-400">{{ blogStats.tagTotalCount || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">标签</div>
                                </div>
                                <div class="text-center p-3 bg-gradient-to-br from-teal-50 to-teal-100 rounded-lg dark:from-teal-900/20 dark:to-teal-800/20">
                                    <div class="text-lg font-bold text-teal-600 dark:text-teal-400">{{ blogStats.pvTotalCount || 0 }}</div>
                                    <div class="text-xs text-gray-600 dark:text-gray-400">总访问</div>
                                </div>
                            </div>
                        </div>
                    </div>





                    <!-- 分类 -->
                    <CategoryListCard></CategoryListCard>

                    <!-- 标签 -->
                    <TagListCard></TagListCard>
                </div>
            </aside>
    </div>

    </main>

    <!-- 返回顶部 -->
    <ScrollToTopButton></ScrollToTopButton>

    <!-- 文章预览弹窗 -->
    <ArticlePreviewModal 
        v-model:visible="previewModalVisible"
        :article-id="previewArticleId"
        @close="closePreviewModal" />

    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/frontend/components/Header.vue'
import Footer from '@/layouts/frontend/components/Footer.vue'
import CategoryListCard from '@/layouts/frontend/components/CategoryListCard.vue'
import TagListCard from '@/layouts/frontend/components/TagListCard.vue'
import ScrollToTopButton from '@/layouts/frontend/components/ScrollToTopButton.vue'
import ArticlePreviewModal from '@/components/ArticlePreviewModal.vue'
import { initTooltips } from 'flowbite'
import { onMounted, ref, computed, watch } from 'vue'
import { getArticlePageList } from '@/api/frontend/article'

import { getCurrentUserProfile, getUserPersonalStats } from '@/api/frontend/user'
import { getBaseStatisticsInfo } from '@/api/admin/dashboard'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { useBlogSettingsStore } from '@/stores/blogsettings'
import { getToken } from '@/composables/cookie'

const router = useRouter()
const userStore = useUserStore()
const blogSettingsStore = useBlogSettingsStore()

// 跳转分类文章列表页
const goCategoryArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（分类 ID、分类名称）
    router.push({path: '/category/article/list', query: {id, name}})
}


// initialize components based on data attribute selectors
onMounted(() => {
    initTooltips();
})

// 文章集合
const articles = ref([])
// 当前页码
const current = ref(1)
// 每页显示的文章数
const size = ref(10)
// 总文章数
const total = ref(0)
// 总共多少页
const pages = ref(0)


// 用户信息
const userProfile = ref(null)
// 用户个人统计数据
const personalStats = ref(null)
// 博客统计信息
const blogStats = ref(null)

// 文章预览相关状态
const previewModalVisible = ref(false)
const previewArticleId = ref(null)

// 长按检测相关变量
let touchTimer = null
const longPressDelay = 800 // 长按时间阈值（毫秒）

// 判断用户是否为管理员
const isAdmin = computed(() => {
    return userStore.userInfo && userStore.userInfo.role === 'ROLE_ADMIN'
})

// 获取用户信息
function getUserProfile() {
    // 检查是否有token，没有token说明用户未登录
    const token = getToken()
    if (!token) {
        // 用户未登录，设置为访客状态
        userProfile.value = null
        personalStats.value = null
        blogStats.value = null
        return
    }

    // 有token时才调用前台用户信息API
    getCurrentUserProfile().then((res) => {
        if (res.success) {
            userProfile.value = res.data
            // 同时更新userStore中的信息，确保前台显示正确
            userStore.userInfo = {
                username: res.data.username,
                role: res.data.role || 'ROLE_VISITOR',
                nickname: res.data.nickname,
                avatar: res.data.avatar,
                bio: res.data.bio,
                email: res.data.email
            }
            // 如果是管理员，获取博客统计数据，不获取个人统计数据
            if (res.data.role === 'ROLE_ADMIN') {
                // 直接调用，因为已经确认是管理员
                getBlogStatsForAdmin()
            } else {
                // 普通用户获取个人统计数据
                getPersonalStats()
            }
        } else {
            // API返回失败，但不清空全局用户信息
            console.log('获取用户信息失败:', res.message)
            userProfile.value = null
            personalStats.value = null
            blogStats.value = null
        }
    }).catch((error) => {
        // 网络错误或其他异常，也不清空全局用户信息
        console.log('获取用户信息异常:', error)
        userProfile.value = null
        personalStats.value = null
        blogStats.value = null
    })
}

// 获取用户个人统计数据
function getPersonalStats() {
    if (userProfile.value) {
        getUserPersonalStats().then((res) => {
            if (res.success) {
                personalStats.value = res.data
            }
        }).catch(() => {
            personalStats.value = null
        })
    }
}

// 获取博客统计信息（仅管理员需要）
function getBlogStats() {
    // 只有管理员才获取博客统计
    if (isAdmin.value) {
        getBlogStatsForAdmin()
    } else {
        // 非管理员用户，确保不显示博客统计
        blogStats.value = null
    }
}

// 专门为管理员获取博客统计信息的函数
function getBlogStatsForAdmin() {
   getBaseStatisticsInfo().then((res) => {
        if (res.success) {
            blogStats.value = res.data
        } else {
            blogStats.value = null
        }
    }).catch((error) => {
        console.log('获取博客统计信息失败:', error)
        blogStats.value = null
    })
}



function getArticles(currentNo) {
    // 上下页是否能点击判断，当要跳转上一页且页码小于 1 时，则不允许跳转；当要跳转下一页且页码大于总页数时，则不允许跳转
    if (currentNo < 1 || (pages.value > 0 && currentNo > pages.value)) return
    // 调用分页接口渲染数据
    getArticlePageList({current: currentNo, size: size.value}).then((res) => {
        if (res.success) {
            articles.value = res.data
            current.value = res.current
            size.value = res.size
            total.value = res.total
            pages.value = res.pages
        }
    })
}

// 初始化数据
getUserProfile()
getArticles(current.value)

// 监听用户store中的userInfo变化，当用户登录或退出时重新获取用户信息
watch(() => userStore.userInfo, (newUserInfo, oldUserInfo) => {
    // 当用户信息发生变化时，重新获取用户资料
    const token = getToken()
    if (!token || Object.keys(newUserInfo).length === 0) {
        // 用户已退出登录，清空本地用户资料
        userProfile.value = null
        personalStats.value = null
        blogStats.value = null
    } else {
        // 用户已登录或用户信息更新，重新获取用户资料
        getUserProfile()
    }
}, { deep: true })

// 跳转文章详情页
const goArticleDetailPage = (articleId) => {
    router.push('/article/' + articleId)
}

// 跳转标签文章列表页
const goTagArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（标签 ID、标签名称）
    router.push({path: '/tag/article/list', query: {id, name}})
}

// 处理触摸开始（长按检测开始）
const handleTouchStart = (event, articleId) => {
    // 清除之前的定时器
    if (touchTimer) {
        clearTimeout(touchTimer)
    }
    
    // 设置长按定时器
    touchTimer = setTimeout(() => {
        // 长按触发，显示预览
        showArticlePreview(articleId)
        
        // 添加触觉反馈（如果设备支持）
        if (navigator.vibrate) {
            navigator.vibrate(50)
        }
    }, longPressDelay)
}

// 处理触摸结束（取消长按检测）
const handleTouchEnd = () => {
    if (touchTimer) {
        clearTimeout(touchTimer)
        touchTimer = null
    }
}

// 处理右键点击（PC端长按替代）
const handleRightClick = (event, articleId) => {
    event.preventDefault()
    showArticlePreview(articleId)
}

// 显示文章预览
const showArticlePreview = (articleId) => {
    previewArticleId.value = articleId
    previewModalVisible.value = true
}

// 关闭预览弹窗
const closePreviewModal = () => {
    previewModalVisible.value = false
    previewArticleId.value = null
}
</script>

<style scoped>
/* 文本截断样式 */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 自定义滚动条 */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #a0aec0;
}

.dark .custom-scrollbar {
    scrollbar-color: #4a5568 transparent;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #4a5568;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: #2d3748;
}
</style>
